<div class='subtitle'>
    <span class='table-title'>线索管理</span>
    <span class='table-add'> 
          <a appBtnPermiss [permissId]="'clue_insert'" routerLink='addclue'>新增</a>
          <!-- <a [routerLink]="[ '/clue/addclue' ]">新增</a> -->
        </span>
    <em class='sub-hr'></em>
</div>
<div class='table-params'>
    <div class='table-row'>
        <div class='table-select'>
            <span>线索来源：</span>
            <div class='selection-info'>
                <nz-select style="width: 120px;" [(ngModel)]="clue.clueOriginValue" [nzDropdownStyle]="{'color':'red','font-size':'14px'}" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                    <nz-option [nzValue]="clueOrigin.value" [nzLabel]="clueOrigin.name" *ngFor="let clueOrigin of clueOriginList"></nz-option>
                </nz-select>
            </div>
        </div>

        <div class='table-select'>
            <span>线索状态：</span>
            <div class='selection-info'>
                <nz-select style="width: 120px;" [nzDropdownStyle]="{'color':'#222','font-size':'14px'}" [(ngModel)]="clue.clueStatus" [nzSuffixIcon]='icon' nzAllowClear nzPlaceHolder="请选择">
                    <nz-option [nzValue]="state.value" [nzLabel]="state.name" *ngFor="let state of clueStatusList"></nz-option>
                </nz-select>
            </div>
        </div>
        <div class='table-input'>
            <span>办理人：</span>
            <input [(ngModel)]="clue.clueHandle" />
        </div>
        <div class='table-input'>
            <span>登记人：</span>
            <input [(ngModel)]="clue.cluePeople" />
        </div>
        <div class='table-input'>
            <span>当事人：</span>
            <input [(ngModel)]="clue.partyName" />
        </div>

  
    </div>
    <div class='table-row'>
        <!-- <div class='table-select'>
            <span>地区：</span>
            <div class='selection-info'>
                <nz-cascader [nzOptions]="areaList" (nzClear)='selectionClear()' [nzLabelRender]='area' nzPlaceHolder='请选择' nzShowArrow='false' [nzShowSearch]="false" (nzSelect)='onSelection($event)' (nzSelectionChange)='onSelectionFn($event)' [nzChangeOnSelect]='true'>

                </nz-cascader>
            </div>
        </div> -->
        <div class='table-date'>
            <span>登记时间：</span>
            <div class='my-date-wrap'>
                <nz-date-picker [(ngModel)]="dateStart" nzPlaceHolder='请选择' nzFormat='yyyy-MM-dd' (ngModelChange)="onStartChange($event)"></nz-date-picker>
            </div>
            <em>至</em>
            <div class='my-date-wrap'>
                <nz-date-picker [(ngModel)]="dateEnd" nzPlaceHolder='请选择' nzFormat='yyyy-MM-dd' (ngModelChange)="onCloseChange($event)"></nz-date-picker>
            </div>
        </div>
        <div class='table-btn-group'>
            <div class='search-btn ripple'>
                <button (click)="search()">查询</button>
            </div>
            <div class='reset-btn ripple'>
                <button (click)="reset()">重置</button>
            </div>
        </div>
    </div>
</div>

<!-- //select模板 -->

<ng-template #icon>
    <i nz-icon nzType="caret-down" nzTheme="outline"></i>
</ng-template>
<!-- 地区 -->
<ng-template #area>
    <div class='area'>
        {{areaData.showArea}} 
        <i nz-icon nzType="caret-down" nzTheme="outline"></i>
    </div>
</ng-template>

<app-table [clue]='searchOption' #table></app-table>